<template>
  <div class="message-center-container">
    <div class="message-header">
      <el-button link class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <span class="message-title">消息中心</span>
      <el-button link class="clear-btn" @click="clearAllMessages">清空</el-button>
    </div>

    <!-- 顶部筛选区 -->
    <div class="message-filter-bar">
      <el-tabs v-model="activeTab" class="filter-tabs" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="系统通知" name="system" />
        <el-tab-pane label="任务通知" name="task" />
        <el-tab-pane label="班组通知" name="team" />
      </el-tabs>
      <el-select v-model="status" class="status-select" placeholder="全部状态" size="small">
        <el-option label="全部状态" value="all" />
        <el-option label="未读" value="unread" />
        <el-option label="已读" value="read" />
      </el-select>
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small" class="date-picker" />
    </div>

    <!-- 消息分组 -->
    <div class="message-group" v-for="(group, groupIdx) in groupedMessages" :key="group.label">
      <div class="group-label">{{ group.label }}</div>
      <div v-for="message in group.messages" :key="message.id" class="message-card" :class="{ unread: !message.read }" @click="goDetail(message)">
        <div class="card-header">
          <el-avatar :size="40" :src="message.avatar" />
          <div class="user-info">
            <span class="user-name">{{ message.user }}</span>
            <el-tag :type="message.roleTagType" size="small" class="role-tag">{{ message.role }}</el-tag>
          </div>
          <div class="meta-info">
            <span class="msg-time">{{ message.time }}</span>
            <span v-if="!message.read" class="dot-unread"></span>
          </div>
        </div>
        <div class="card-title">{{ message.title }}</div>
        <div class="card-content">{{ message.content }}</div>
        <div v-if="message.links && message.links.length" class="card-links">
          <el-link v-for="(link, idx) in message.links" :key="idx" :href="link.url" target="_blank" type="primary">{{ link.text }}</el-link>
        </div>
        <div class="card-actions">
          <el-link type="info" @click.prevent>回复</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const activeTab = ref('all')
const status = ref('all')
const dateRange = ref([])

// 示例消息数据
const messages = ref([
  {
    id: 1,
    user: '张建国',
    avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
    role: '工长',
    roleTagType: 'success',
    title: 'BX基础施工进度调整会议通知',
    content: '关于BX基础施工进度，需要调整施工计划，建议明天上午10点召开现场会议讨论具体细节。主要涉及以下几点：1. 地基加固方案的优化；2. 施工人员的调配；3. 材料供应时间的协调。请相关人员准时参加。',
    links: [
      { text: 'BX基础施工计划调整', url: '#' }
    ],
    time: '10:30',
    date: '2024-01-16',
    read: false
  },
  {
    id: 2,
    user: '李明远',
    avatar: '',
    role: '用户',
    roleTagType: 'info',
    title: '',
    content: '收到材料供应商的最新报价单，需要各位审核核确认。',
    links: [
      { text: '材料采购明细', url: '#' }
    ],
    time: '09:15',
    date: '2024-01-16',
    read: true
  },
  {
    id: 3,
    user: '王大力',
    avatar: 'https://randomuser.me/api/portraits/men/45.jpg',
    role: '工人',
    roleTagType: 'warning',
    title: '',
    content: 'CX管道安装已完成初步检查，请安排复核。',
    links: [
      { text: 'CX管道安装验收', url: '#' }
    ],
    time: '16:45',
    date: '2024-01-15',
    read: false
  }
])

// 分组（今天/昨天）
function getDateLabel(dateStr) {
  const today = new Date()
  const msgDate = new Date(dateStr)
  const diff = today.setHours(0,0,0,0) - msgDate.setHours(0,0,0,0)
  if (diff === 0) return '今天'
  if (diff === 86400000) return '昨天'
  return dateStr
}

const groupedMessages = computed(() => {
  const groups = {}
  messages.value.forEach(msg => {
    const label = getDateLabel(msg.date)
    if (!groups[label]) groups[label] = []
    groups[label].push(msg)
  })
  return Object.entries(groups).map(([label, messages]) => ({ label, messages }))
})

function goBack() {
  router.back()
}

function handleTabClick() {}
function clearAllMessages() {
  ElMessageBox.confirm('确定要清空所有消息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    messages.value = []
  })
}

function goDetail(message) {
  router.push(`/message-detail/${message.id}`)
}
</script>

<style scoped>
.message-center-container {
  background: #f5f7fa;
  min-height: 100vh;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 32px;
}
.message-header {
  display: flex;
  align-items: center;
  padding: 18px 32px 0 32px;
  background: #f5f7fa;
}
.back-btn {
  font-size: 1.1em;
  color: #409EFF;
  padding: 0;
  margin-right: 12px;
}
.message-title {
  flex: 1;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  color: #222;
}
.clear-btn {
  font-size: 0.9em;
  color: #666;
  padding: 0;
}
.message-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px 16px 32px;
  background: #f5f7fa;
}
.filter-tabs {
  flex: 1;
}
.status-select {
  width: 120px;
}
.date-picker {
  width: 240px;
}
.message-group {
  margin-bottom: 32px;
}
.group-label {
  font-size: 1.05em;
  color: #888;
  font-weight: 500;
  margin: 18px 0 10px 32px;
}
.message-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 0 32px 18px 32px;
  padding: 18px 20px 12px 20px;
  transition: box-shadow 0.2s;
  position: relative;
  border: 1px solid #f2f2f2;
}
.message-card.unread {
  border: 1.5px solid #409eff;
  box-shadow: 0 4px 16px rgba(64,158,255,0.07);
}
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  font-weight: 500;
}
.user-name {
  color: #222;
}
.role-tag {
  margin-left: 2px;
  font-size: 0.92em;
}
.meta-info {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-time {
  color: #999;
  font-size: 0.98em;
}
.dot-unread {
  width: 8px;
  height: 8px;
  background: #f56c6c;
  border-radius: 50%;
  display: inline-block;
}
.card-title {
  font-weight: 600;
  color: #222;
  font-size: 1.08em;
  margin-bottom: 4px;
}
.card-content {
  color: #444;
  font-size: 1em;
  margin-bottom: 6px;
}
.card-links {
  margin-bottom: 6px;
}
.card-links .el-link {
  margin-right: 12px;
  font-size: 0.97em;
}
.card-actions {
  text-align: right;
  margin-top: 2px;
}
.card-actions .el-link {
  font-size: 0.95em;
}
@media (max-width: 600px) {
  .message-center-container {
    max-width: 100vw;
    padding-bottom: 16px;
  }
  .message-header, .message-filter-bar {
    padding: 12px 8px 0 8px;
  }
  .group-label {
    margin-left: 8px;
  }
  .message-card {
    margin: 0 8px 14px 8px;
    padding: 12px 10px 8px 10px;
    border-radius: 10px;
  }
}
</style> 